<template>
  <el-menu
    :default-active="activePath"
    unique-opened
    menu-trigger="click"
    router
  >
    <template
      v-for="item in menuList"
      :key="item.id"
      @click="getStore(item.path)"
    >
      <!-- 根节点 -->
      <el-menu-item v-if="!item.children" :index="item.path">{{
        item!.title
      }}</el-menu-item>
      <!-- 有二级菜单 -->
      <el-sub-menu v-else>
        <template #title>
          <el-icon><location /></el-icon>
          <span>{{ item.title }}</span>
        </template>
        <template>
          <el-menu-item
            v-for="i in item.children"
            :key="i.id"
            :index="i.path"
            >{{ i.title }}</el-menu-item
          >
        </template>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref } from "vue";
import {useRoute } from 'vue-router'
const route = useRoute()

let activePath = ref("");

const getStore = (clickPath: string) => {
  sessionStorage.setItem("storeActivePath", clickPath);
  activePath.value = clickPath;
};

onMounted(() => {
//   activePath.value = sessionStorage.getItem("storeActivePath") as string;
  activePath.value = route.path
});

defineProps({
  /**
   * 菜单
   */
  menuList: {
    type: Array,
    default: () => [],
  },
});
</script>

<style scoped lang="scss"></style>
